<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" width="70%" destroy-on-close @closed="$emit('closed')">
		<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="130px" label-position="right">
			<el-form-item label="模板名称：" prop="template_name">
				<el-input v-model="form.template_name" clearable></el-input>
			</el-form-item>
            <el-form-item label="模板类型：" prop="template_type">
                <el-radio-group v-model="form.template_type" class="ml-4">
                    <el-radio value="1" lable="1" size="small" border>买家承担运费</el-radio>
                    <el-radio value="2" label="2" size="small" border>卖家包邮</el-radio>
                </el-radio-group>
			</el-form-item>
			<el-form-item label="计费方式：" prop="template_freight_type">
				<el-radio-group v-model="form.template_freight_type" class="ml-4">
                    <el-radio value="1" lable="1" size="small" border>按件数</el-radio>
                    <el-radio value="2" label="2" size="small" border>按重量</el-radio>
                    <el-radio value="3" label="3" size="small" border>按体积</el-radio>
                </el-radio-group>
			</el-form-item>
            <el-form-item label="配送区域及运费：" prop="sort">
                            <el-card shadow="never" style="margin-top: 10px;margin-bottom: 10px;width: 85%;">
                            <el-table :data="data" border style="width: 100%;margin-top: 5px;">
                                    <el-table-column label="可配送区域">
                                        <template #default="">
                                               <p>选择可配送区域</p>
                                               <p style="text-align: right">
                                                 <a href="javascript:;" @click="showtan">编辑</a>&nbsp;&nbsp;&nbsp;
                                                 <a href="javascript:;">删除</a>
                                               </p>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="首件(个)" width="120">
                                        <template #default="scope">
                                            <el-input placeholder="" v-model="scope.row.pro_price"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="运费(元)" width="120">
                                        <template #default="scope">
                                            <el-input placeholder="" v-model="scope.row.pro_original_price"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column  label="续件(个)" width="120">
                                        <template #default="scope">
                                            <el-input placeholder="" v-model="scope.row.pro_stock"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column  label="续费(元)" width="120">
                                        <template #default="scope">
                                            <el-input placeholder="" v-model="scope.row.pro_stock"></el-input>
                                        </template>
                                    </el-table-column>
                                     
                            </el-table>
                        </el-card>
			</el-form-item>
			<el-form-item label="排序：" prop="sort">
				<el-input-number v-model="form.sort" controls-position="right" :min="1" style="width: 150px"></el-input-number>
			</el-form-item>
			<el-form-item label="默认模板：" prop="status">
				<el-switch v-model="form.status" active-value="1" inactive-value="0"></el-switch>
			</el-form-item>
			 
		</el-form>
		<template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>


    <el-dialog
            v-model="dialogVisible"
            title="添加可配送区域"
            width="65%"
            height="80vh"
            z-index="999999999"
            :before-close="handleClose"
          >
           <div style="width: 100%;margin-bottom: 10px">
            <el-alert
            :closable="false"
            title="不配送区域请取消勾选"
            type="error">
          </el-alert>
           </div>
            <div class="areabox">
                <div class="area">
                        <a href="javascript:;" v-for="(item,index) in sheng" :key="item.areaid">
                            <img :src="item.chk==1?'/img/xuanze.svg':'/img/weixuan.svg'" class="icon" @click="ck_icon(index,1)"/>
                            <img src="/img/jian.svg" class="jian"/>
                            <span @click="ck(item.areaid,1,index)" :class="sheng_id==item.areaid?'xuan':''"> {{item.areaname}}</span>
                        </a>
                </div> 
                <div class="area">
                         <a href="javascript:;" v-for="(item,index) in shi" :key="item.areaid" >
                            <img :src="item.chk==1?'/img/xuanze.svg':'/img/weixuan.svg'" class="icon" @click="ck_icon(index,2)"/>
                            <img src="/img/jian.svg" class="jian"/>
                            <span @click="ck(item.areaid,2,index)" :class="shi_id==item.areaid?'xuan':''">{{item.areaname}}</span>
                        </a>
                </div>
                <div class="area">
                        <a href="javascript:;" v-for="(item,index) in qu" :key="item.areaid">
                            <img :src="item.chk==1?'/img/xuanze.svg':'/img/weixuan.svg'" class="icon" @click="ck_icon(index,3)"/>
                            <img src="/img/jian.svg" class="jian"/>
                           <span @click="ck(item.areaid,3,index)" :class="qu_id==item.areaid?'xuan':''">{{item.areaname}}</span>
                        </a>
                </div>
            </div>
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogsubmit">
                确定
                </el-button>
            </div>
            </template>
    </el-dialog>

</template>

<script>
	export default {
		emits: ['success', 'closed'],
		data() {
			return {
                sheng_id:'',
                shi_id:'',
                qu_id:'',
                sheng_dex:'',
                shi_dex:'',
                qu_dex:'',
                sheng:[],
                shi:[],
                qu:[],
                dialogVisible:false,
                data:[1],
				mode: "add",
				titleMap: {
					add: '新增运费模板',
					edit: '编辑运费模板',
					show: '查看'
				},
				visible: false,
				isSaveing: false,
				//表单数据
				form: {},
				//验证规则
				rules: {
 
					template_name: [
						{required: true, message: '请输入模板名称'}
					],
 
				},
                some_select:[]
			}
		},
		mounted() {
            
		},
		methods: {
            showtan(){
                this.dialogVisible = true
                this.getarea({'t':0})
            },
            is_all_xuan(t=''){
                if(t == 3){ //点击地区
                     var select_qu = []
                     var select_shi2 = []
                     var j=0;
                     for(var i=0;i<this.qu.length;i++){
                            if(this.qu[i].chk == 0 || this.qu[i].chk == false){
                                   j++;
                            }else{
                                  select_qu.push({'areaid':this.qu[i].areaid,'areaname':this.qu[i].areaname})
                            }
                     }
                     this.shi[this.shi_dex].chk = (j > 0) ? 0 :1 

                     var m = 0
                     for(var k=0;k<this.shi.length;k++){
                            if(this.shi[k].chk == 0 || this.shi[k].chk == false){
                                   m++;
                            }else{
                                  select_shi2.push({'areaid':this.shi[k].areaid,'areaname':this.shi[k].areaname})
                            }
                     }
                     this.sheng[this.sheng_dex].chk = (m > 0) ? 0 :1

                     
                     
                }
                if(t == 2){
                     m = 0
                     var select_shi = []
                     for(k=0;k<this.shi.length;k++){
                            if(this.shi[k].chk == 0 || this.shi[k].chk == false){
                                   m++;
                            }else{
                                  select_shi.push({'areaid':this.shi[k].areaid,'areaname':this.shi[k].areaname})
                            }
                     }
                     this.sheng[this.sheng_dex].all_area = (m > 0) ? select_shi : []
                     this.sheng[this.sheng_dex].chk = (m > 0) ? 0 :1

                     console.log(this.sheng)
                }
            },
            ck_icon(dex,t){
                if(t==1){
                      this.sheng[dex].chk = !this.sheng[dex].chk
                      if(this.shi != null && dex==this.sheng_dex){
                         this.harr(this.shi,2,this.sheng[dex].chk)
                      }
                      if(this.qu != null){
                         this.harr(this.qu,3,this.sheng[dex].chk)
                      }
                }
                if(t==2){
                      this.shi[dex].chk = !this.shi[dex].chk
                      if(this.qu != null && dex==this.shi_dex){
                         this.harr(this.qu,3,this.shi[dex].chk)
                      }
                      this.is_all_xuan(t)
                }
                if(t==3){
                      this.qu[dex].chk = !this.qu[dex].chk
                      this.is_all_xuan(t)
                }
            },
            ck(id,t = 0 ,dex =''){
                this.getarea({'pid':id,'t':t,'dex':dex})
                if(t == 1){
                     this.sheng_dex = dex
                     this.sheng_id = id
                     this.shi_id = ''
                     this.qu = []
                     this.qu_id = ''
                     this.shi_dex = ''
                     this.qu_dex = ''
                }else if(t==2){
                    this.shi_id = id
                    this.shi_dex = dex
                    this.qu_dex = ''
                    this.qu_id = ''
                }else{
                    this.qu_id = id
                }
            },
            harr(arr,t=1,v=0){ 
                for(var i=0;i<arr.length;i++){
                        arr[i].chk= v
                }
                if(t==1){
                     this.sheng = arr
                }
                if(t==2){
                     this.shi = arr
                }
                if(t==3){
                     this.qu = arr
                }
            },
            async getarea(data = ''){
                var res = await this.$API.demo.area.post(data)
                if(res.code == 200){
                      if(data.t==1){
                          if(this.sheng[data.dex].chk == 0){
                             this.harr(res.data,2,0)
                          }else{
                              this.shi = res.data
                          }
                      }else if(data.t == 2){
                          if(this.shi[data.dex].chk == 0){
                              this.harr(res.data,3,0)
                          }else{
                              this.qu = res.data
                          }
                      }else if(data.t == 0){
                          this.sheng = res.data
                      }
                }
            },
			//显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this
			},
			//表单提交方法
			submit(){
				this.$refs.dialogForm.validate(async (valid) => {
					if (valid) {
						this.isSaveing = true;
						var res = await this.$API.demo.post.post(this.form);
						//var res = await this.$API.system.role.save(this.form);
						this.isSaveing = false;
						if(res.code == 200){
							this.$emit('success', this.form, this.mode)
							this.visible = false;
							this.$message.success("操作成功")
						}else{
							this.$alert(res.message, "提示", {type: 'error'})
						}
					}
				})
			},
			//表单注入数据
			setData(data){
				this.form.id = data.id
				this.form.name = data.name
				this.form.alias_name = data.alias_name
				this.form.sort = data.sort
				this.form.status = data.status
				this.form.remarks = data.remarks

				//可以和上面一样单个注入，也可以像下面一样直接合并进去
				//Object.assign(this.form, data)
			}
		}
	}
</script>

<style>
.areabox{
    width: 100%;
}
.xuan{
    background-color: bisque;
}
.area{
    width: 33%;
    overflow-y: scroll;
    height:400px;
    overflow-x: hidden;
    display: inline-block;
    padding-left: 15px;
}
.area a{
    display: block;
    float: left;
    width: 100%;
    height:36px;
    line-height: 36px;
    position: relative;
    padding-left: 25px;
    border-bottom: 1px solid #eee;
}
.area a .icon{
    width: 20px;
    height: 20px;
    position: absolute;
    top:8px;
    left:0
}
.area a .jian{
    width: 20px;
    height: 20px;
    position: absolute;
    top:8px;
    right:10px
}
.area a span{
    width:100%;
    display: block;
    padding-left: 10px;
}
</style>
